﻿@{
  
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    @*<style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .layui-table-tool-self {
            display: none;
        }
    </style>*@
</head>
<body>

    <table class="layui-hide" id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
     <script src="~/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    <script>
        layui.config({
            version: '1606182314890' //为了更新 js 缓存，可忽略
        });

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格

            //执行一个 table 实例
            table.render({
                elem: '#demo'
                , url: '/Field/GetFieldList' //数据接口
                , title: '承运合同表'
                
                , page: true //开启分页
                , toolbar: 'default' //开启头工具栏，此处显示默认图标，可以自定义模板，详见文档
                , limit: 3
                , limits: [3, 6, 9, 12]
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }//锁定第一列
                    , { field: 'id', title: '编号', width: 100, align: 'center' }
                    , { field: 'name', title: '外协单位名称', width: 160, align: 'center' }
                    , { field: 'fphone', title: '手机号', width: 160, align: 'center' }
                    , { field: 'femal', title: '邮箱', width: 180, align: 'center' }
                    , { field: 'fsite', title: '外协地址', width: 160, align: 'center' }
                    , { field: 'ffixed', title: '固话', width: 160, align: 'center' }
                    , { field: 'fremark', title: '备注', width: 100, align: 'center' }
                    , { field: 'fdate', title: '创建时间',templet : "<div>{{layui.util.toDateString(d.create_time*1000, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"  }
                   , { fixed: 'right', title: "操作", width: 200, align: 'center', toolbar: '#barDemo' }
                ]]
            });

            //监听头工具栏事件
            table.on('toolbar', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                      
                   location.href="/Field/PostItemView";
                        break;
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑Id：' + checkStatus.data[0].Id);
                        }
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            layer.alert('删除Id：' + checkStatus.data[0].Id);
                            layer.msg('删除');
                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                         $.ajax({
                            url:"/Field/Delete",
                            type:"get",
                            dataType:"json",
                            data:{Id:data.id},
                            success:function(obj)
                            {
                                
                                    alert("删除成功!!!");
                                    
                               
                               
                            }
                        })
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令  
                    });
                      
                    
                } else if (layEvent === 'edit') {
                   
                    location.href="/Field/Edit?Id="+data.id;
                }
            });
        });
    </script>
</body>
</html>